<template>
  <div>
    <h3 class="title_h3 titone">
      <span>直播列表</span>
    </h3>
    <div class="live_details" v-if="hasRoot">
      <div class="ld_search_date">
        <span
          v-for="item in fDate"
          :class="{ active: item.active }"
          :key="item.text"
          @click="checkedDateFn(item)"
        >{{ item.text }}</span>
      </div>
      <!-- 目前接口没有总销量的数据 -->
      <div class="ld_data">
        <div class="data_item">
          <span>总销量</span>
          <p class="strong">{{ format_num(totalData.volume) }}</p>
        </div>
        <div class="data_item">
          <span>总销售额</span>
          <p class="strong">{{ format_num(totalData.amount) }}</p>
        </div>
      </div>
      <div class="search_box">
        <input
          v-model="keyWords"
          @keydown.enter="keyWordsFn"
          type="text"
          placeholder="输入直播间标题关键词搜索"
        />
        <i class="search_icon" @click="keyWordsFn" :class="{ active: keyWordsIsActive }"></i>
      </div>
      <div class="goods_list" v-if="!isNodata">
        <ul v-if="datas.length">
          <li
            v-for="(item, idx) in datas"
            :key="'datas1' + idx"
            @click="goPage(item.roomId, item.authorId)"
          >
            <div class="li_top">
              <div class="img_box" @click="goPage(item.roomId, item.authorId)">
                <img :src="item.roomLogo" v-errorImg:live/>
                <!-- <div class="livingBox" > -->
                <div class="liveAnimation" v-if="item.status == 1">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
                <!-- </div> -->
              </div>
              <div class="gl_text">
                <h5>{{ item.roomTitle }}</h5>
                <p>开播时间：{{ timestamp(item.beginUnix, "M-D h:m") }}</p>
              </div>
            </div>
            <div class="li_footer">
              <div class="item_data">
                <p class="strong">{{ [item.maxPrice, item.livePrice] | setPrice }}</p>
                <p>直播价格</p>
              </div>
              <div class="item_data">
                <p class="strong">{{ format_num(item.volume) }}</p>
                <p>直播销量</p>
              </div>
              <div class="item_data">
                <p class="strong">{{ format_num(item.amount) }}</p>
                <p>直播销售额</p>
              </div>
            </div>
          </li>
        </ul>
        <template v-if="!isNodata">
          <template v-if="!loading">
            <div class="more" @click="getMore" v-if="isMore">查看更多</div>
            <p class="more_no" v-else>我是有底线的~</p>
          </template>
          <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
        </template>
      </div>
      <div class="nodata_page" v-else>
        <div class="img_box">
          <img src="@/assets/three/noData.png" />
        </div>
        <p>暂无数据</p>
      </div>
    </div>
    <!-- <noPower v-else :bg="'https://sf6-ttcdn-tos.pstatp.com/img/temai/e2797a315ea86dd81f757246ad696efedbb5263dwww800-800~tplv-resize:200:0.jpeg'" /> -->
    <noPower :minLeve="$store.state.userRoot[8][135].ownerMinLevel" v-else />
    <!-- <div class="blank_holder" v-if="loading"></div> -->
    <div class="bott"></div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      id: this.$route.query.id,
      datas: [], //直播详情数据
      fDate: [
        //筛选日期
        { text: '近7天', active: false },
        { text: '30天', active: true },
        { text: '90天', active: false }
      ],
      searchDates: [], //存放开始时间和结束时间
      keyWordsIsActive: false, //搜索按钮是否高亮
      keyWords: '', //搜索词
      sort: 0, //类型排序  //1直播价格、2直播销量、3直播销售额
      orderBy: 'desc', //desc降序 asc升序
      page: 1, //页码
      size: 10, //个数
      isMore: true, //是否还有下一页
      isNodata: false, //是否有数据
      loading: true,
      hasRoot: true,
      totalData: '' //总销量，总销售额
    };
  },
  created() {
    this.fDate.forEach((item, idx) => {
      let initData = idx ? (idx == 1 ? 30 : 90) : 7;
      let dates = this.initDateInterval(initData);
      item.dates = dates;
    });
    this.searchDates = this.initDateInterval(30); //默认30天
    this.getData();
    this.getTotalData();
  },
  components: {},
  methods: {
    goPage(lid, aid) {
      this.$router.push({
        path: '/LiveForDetailsMain',
        query: {
          room_id: lid,
          author_id: aid
        }
      });
    },
    initF() {
      //重置筛选项
      this.page = 1;
      this.datas = [];
      this.isMore = true;
    },
    getTotalData() {
      //获取总计数据
      // let pms = {
      //   proId: this.id,
      //   // proId: "3480244482744692868",
      //   startDate: this.searchDates[0],
      //   endDate: this.searchDates[1],
      //   key: this.trimStr(this.keyWords),
      //   sort: this.sort,
      //   order_by: this.orderBy
      // };
      // this.$axios.post('/api/live/searchprovolume', pms).then(res => {
      //   if (res.data.code == 0) {
      //     this.totalData = res.data.data;
      //   } else if (res.data.code == 1003) {
      //     //无权限
      //   }
      // });
      this.$axios
        .get(
          `/api/product/prolivetrend?proid=${this.id}&startdate=${this.searchDates[0]}&enddate=${this.searchDates[1]}`
        )
        .then(res => {
          if (res.data.code == 0) {
            this.totalData = res.data.data;
          }else if(res.data.code == 1003){
            //无权限
          }
        });
    },
    getData() {
      this.isNodata = false;
      this.loading = true;
      let pms = {
        proId: this.id,
        // proId: "3480244482744692868",
        startDate: this.searchDates[0],
        endDate: this.searchDates[1],
        key: this.trimStr(this.keyWords),
        sort: this.sort,
        order_by: this.orderBy,
        page: this.page,
        size: this.size
      };
      this.$axios.post('/api/live/searchpro', pms).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          if (this.page == 1) {
            //如果第一页直接赋值，其他的拼接
            this.datas = res.data.data;
          } else {
            this.datas = this.datas.concat(res.data.data);
          }

          if (this.datas.length >= res.data.count) {
            this.isMore = false;
          }
          this.page++;
        } else if (res.data.code == 1003) {
          this.hasRoot = false;
          //无权限
        } else {
          this.isNodata = true;
        }
      });
    },
    getMore() {
      this.getData();
    },
    checkedDateFn(item) {
      //切换日期选项
      this.fDate.forEach(itemC => {
        itemC.active = false;
      });
      item.active = true;
      this.searchDates = item.dates;

      this.initF();
      this.getData();
      this.getTotalData();
    },
    keyWordsFn() {
      if (this.keyWords) {
        this.initF();
        this.getData();
        this.getTotalData();
      }
    },
    keyWordsBlur() {
      this.keyWordsIsActive = Boolean(this.keyWords);
    }
  },
  computed: {},
  watch: {
    keyWords(newVal) {
      if (newVal == '') {
        this.initF();
        this.getData();
        this.getTotalData();
        this.keyWordsIsActive = false;
      } else {
        this.keyWordsIsActive = true;
      }
    }
  },
  filters: {
    setPrice(prices) {
      let maxP = (prices[0] = Number(prices[0]));
      let minP = (prices[1] = Number(prices[1]));
      if (maxP > minP) {
        return '￥' + minP + '-' + maxP;
      } else if (maxP == minP || maxP < minP) {
        return '￥' + minP;
      } else if (maxP == 0 && minP == 0) {
        return '--';
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}

@import './../../../common/common.styl';

.titone {
  margin: 0.6933rem 0.4rem 0;
}

.live_details {
  padding: rem(50) rem(30) rem(50) rem(30);

  .ld_search_date {
    margin-top: rem(26);
    font-size: 0;

    span {
      display: inline-block;
      padding: rem(6) rem(14);
      background-color: #fff;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: rem(24);
      margin-right: rem(15);

      &.active {
        background-color: #fd7f2c;
        border-color: #fd7f2c;
        color: #fff;
      }
    }
  }

  .ld_data {
    display: flex;
    justify-content: space-between;
    margin-top: rem(20);

    .data_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: rem(335);
      border-radius: rem(10);
      padding: rem(17) rem(30);
      font-size: rem(28);
      background-color: #f5f5f5;
      box-sizing: border-box;

      span {
        color: #888;
      }

      .strong {
        color: #222;
        // font-family: DINPro-Medium;
      }
    }
  }

  .search_box {
    position: relative;
    box-sizing: border-box;
    height: rem(74);
    border-radius: rem(10);
    border: solid 1px #e5e5e5;
    background-color: #fff;
    padding: 0 rem(80) 0 rem(32);
    margin-top: rem(30);

    input {
      width: 100%;
      height: 100%;
      border: none;
      font-size: rem(28);
    }

    .search_icon {
      position: absolute;
      right: 0;
      top: 0;
      display: inline-block;
      width: rem(94);
      height: rem(72);
      bgp('./../../../assets/two/search-nohover.png');
      background-size: rem(30) rem(30);

      &.active {
        bgp('./../../../assets/two/search.png');
        background-size: rem(30) rem(30);
      }
    }
  }

  .goods_list {
    li {
      padding: rem(30) 0;
      border-bottom: 1px solid #e5e5e5;

      // &:last-child{
      // border-bottom none;
      // }
      .li_top {
        display: flex;
        align-items: center;

        .img_box {
          position: relative;
          flex-shrink: 0;
          width: rem(100);
          height: rem(100);
          margin-right: rem(19);
          border-radius: rem(20);

          img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: rem(20);
          }

          .livingBox {
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 0.4267rem;
            height: 0.4267rem;
            background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%), linear-gradient(#ededed, #ededed);
            background-blend-mode: normal, normal;
            border-radius: 0.0667rem;
          }
        }

        .gl_text {
          width: rem(570);

          h5 {
            font-size: rem(30);
            color: #222;
            font-weight: normal;
            omit();
          }

          p {
            font-size: rem(24);
            color: #888;
            margin-top: rem(5);
          }
        }
      }

      .li_footer {
        display: flex;
        justify-content: space-between;
        margin-top: rem(30);
        padding: 0 rem(64);

        .item_data {
          text-align: center;
          font-size: 0;

          .strong {
            font-size: rem(30);
            color: #222;
            font-family: DINPro-Medium;
          }

          p {
            font-size: rem(24);
            color: #888;
          }
        }
      }
    }

    .more {
      width: rem(160);
      height: rem(60);
      margin: rem(50) auto 0;
      text-align: center;
      line-height: rem(60);
      border-radius: rem(10);
      border: solid 1px #fd7f2c;
      font-size: rem(26);
      color: #fd7f2c;
    }

    .more_no {
      margin-top: rem(26);
      font-size: rem(24);
      color: #b5b5b5;
      text-align: center;
    }
  }
}

.loading {
  margin: rem(50) 0 rem(10);
}

.nodata_page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: rem(100) 0;

  .img_box {
    width: rem(297);
    height: rem(232);

    img {
      width: 100%;
      height: 100%;
    }
  }

  p {
    font-size: rem(26);
    color: #888;
  }
}
</style>
